<template>
  <view>
    <u-tabbar
      id="tabber#####"
      :value="getCurrent()"
      :fixed="fixed"
      :placeholder="true"
      :safe-area-inset-bottom="true"
      active-color="#0092FF"
      inactive-color="#666"
      @change="tabbarChange"
    >
      <u-tabbar-item
        v-for="(item, index) in tabBarList"
        :key="index"
        :text="item.text"
      >
        <template #active-icon>
          <image class="u-page__item__slot-icon" :src="item.selectedIconPath" />
        </template>
        <template #inactive-icon>
          <image class="u-page__item__slot-icon" :src="item.iconPath" />
        </template>
      </u-tabbar-item>
    </u-tabbar>
  </view>
</template>

<script setup>
import global from "@/utils/global";
const props = defineProps({
  current: {
    type: Number,
    default: 0,
  },
  tabBarList: {
    type: Array,
  },
  fixed: {
    type: Boolean,
    default: true,
  },
});
const getCurrent = () => {
  return global.tabBarCurrent ? global.tabBarCurrent : props.current;
};
const tabbarChange = (index) => {
  global.tabBarCurrent = index;
  if (props.tabBarList[index].pagePath === "pages/mall/mall") {
    uni.setStorageSync("tabbarIndex", props.current);
    uni.navigateTo({
      url: "/" + props.tabBarList[index].pagePath,
    });
    return;
  }
  uni.switchTab({
    url: "/" + props.tabBarList[index].pagePath,
  });
};
onLoad(() => {
  console.log(props.current);
});
</script>

<style lang="scss" scoped>
.u-page__item__slot-icon {
  width: 20px;
  height: 20px;
}
</style>
